<template>
  <div class="an-layout">
    <img :src="banner" class="banner-img">
    <img :src="sliderImg" class="slider-img">
    <img :src="bgImg1" class="bg-img bg-img1">
    <img :src="bgImg2" class="bg-img bg-img2">

    <!-- app圆形图标开始 -->
    <img :src="APP1" class="app-img-1 app-img">
    <img :src="APP2" class="app-img-2 app-img">
    <img :src="APP3" class="app-img-3 app-img">
    <img :src="APP4" class="app-img-4 app-img">
    <img :src="APP5" class="app-img-5 app-img">

    <!-- app圆形图标 结束-->

    <!-- app正方形图标开始 -->
    <img :src="Group1" class="group-img-1 group-img">
    <img :src="Group2" class="group-img-2 group-img">
    <img :src="Group3" class="group-img-3 group-img">、
    <!-- app正方形图标结束 -->
    <!-- // 两个箭头开始 -->
    <img :src="arrows1" class="arrows-img-1 arrows-img">
    <img :src="arrows2" class="arrows-img-2 arrows-img">
    <!-- // 两个箭头结束 -->

    <span class="dot top-dot"></span>
    <span class="dot bot-dot"></span>
    <span class="side side-dot"></span>

  </div>
</template>
<script>
export default {
  name: '', // ·������
  data() {
    return {
      banner: require('@/assets/images/homeAnimate/banner.svg'),
      sliderImg: require('@/assets/images/homeAnimate/phone.png'),
      bgImg1: require('@/assets/images/homeAnimate/bg1.svg'),
      bgImg2: require('@/assets/images/homeAnimate/bg2.svg'),

      // <!-- app圆形图标开始 -->
      APP1: require('@/assets/images/homeAnimate/APP1.png'),
      APP2: require('@/assets/images/homeAnimate/APP2.png'),
      APP3: require('@/assets/images/homeAnimate/APP3.png'),
      APP4: require('@/assets/images/homeAnimate/APP4.png'),
      APP5: require('@/assets/images/homeAnimate/APP5.png'),
      /* <!-- app圆形图标 结束-->*/

      // <!-- app正方形图标开始 -->
      Group1: require('@/assets/images/homeAnimate/Group1.png'),
      Group2: require('@/assets/images/homeAnimate/Group2.png'),
      Group3: require('@/assets/images/homeAnimate/Group3.png'),
      // <!-- app正方形图标结束 -->

      // 两个箭头开始
      arrows1: require('@/assets/images/homeAnimate/arrows1.png'),
      arrows2: require('@/assets/images/homeAnimate/arrows2.png')
      // 两个箭头结束

    }
  },
  computed: {

  },
  watch: {
    // obj: { //�����Ķ���
    //   deep: true, //���ȼ�������Ϊ true
    //   // ������wacth��������firstName��������֮��������ȥִ��handler����
    //       immediate: true
    //   handler: function(newV, oldV) {
    //   }
    // }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {

  }
}
</script>

<style scoped lang="scss">
  @keyframes float {
    0% {
      transform: translate3d(0, -5px, 0) translateZ(0);
    }

    100% {
      transform: translate3d(0, 5px, 0) translateZ(0);
    }
  }

  .app-img {
    animation: float 3.8s ease-in-out infinite alternate;

  }

  .group-img {
    animation: float 5s ease-in-out infinite alternate;
    animation-delay: .25s;
  }

  // .arrows-img {

  //   animation: float 3.4s ease-in-out infinite alternate;
  //   animation-delay: .25s
  // }

  .an-layout {
    width: 411.21px;
    height: 290.06px;
    position: relative;
    z-index: 1;

    img,
    span {
      position: absolute;
    }

    .banner-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .slider-img {
      position: absolute;
      width: 310px;
      height: 460px;
      z-index: 2;
      top: 38px;
      left: -146px;
    }

    .bg-img1 {
      right: -43px;
      top: -38px;
      width: 78.35px;
      height: auto;
    }

    .bg-img2 {
      right: -85px;
      bottom: -51px;
      width: 104px;
      height: auto;
    }

    .app-img,
    .group-img {
      z-index: 2;
      width: auto;
    }

    .app-img-1 {
      height: 82px;
      top: -60px;
      left: -24px;
    }

    .app-img-2 {
      height: 86px;
      top: 30px;
      left: -182px;
    }

    .app-img-3 {
      top: -46px;
      right: 22px;
      height: 84px;
    }

    .app-img-4 {
      height: 86px;
      right: 132px;
      top: 86px;
    }

    .app-img-5 {
      width: 84px;
      bottom: -42px;
      right: 94px;
    }

    .group-img-1 {
      top: 136px;
      left: -187px;
      width: 294px;
    }

    .group-img-2 {
      bottom: -66px;
      left: -136px;
      width: 266px;
    }

    .group-img-3 {
      bottom: -193px;
      right: -115px;
      width: 276px;
    }

    .arrows-img {
      z-index: 3;

    }

    .arrows-img-1 {
      width: 40px;
      top: 54px;
      right: -30px;
    }

    .arrows-img-2 {
      width: 54px;
      top: -6px;
      left: -72px;
    }

    span {
      display: block;
      z-index: 4;

      &.dot {
        border-radius: 50%;
      }

      &.top-dot {
        width: 14.53px;
        height: 14.28px;
        background: #00B65B;
        top: -60px;
        left: 230px;
      }

      &.bot-dot {
        width: 15.65px;
        height: 15.38px;
        background: #FFC700;
        left: -100px;
        top: 132px;
      }

      &.side {
        width: 10.72px;
        height: 10.71px;
        right: 2rem;
        top: 90px;
        background: #FF782D;
        transform: rotate(224deg) translateZ(0);

      }
    }

  }

  @media screen and (max-width: 1080px) {

    .an-layout {
      margin: 0 auto;
      margin-left: 5.32rem;
      width: 12.025rem;
      height: 8.371rem;
      padding: 0;
      position: relative;
      z-index: 1;

      img,
      span {
        position: absolute;
      }

      img {
        display: none;
      }

      .banner-img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
      }

      .slider-img {
        display: block;
        position: absolute;
        width: 8.6rem;
        height: auto;
        z-index: 2;
        top: 0;
        left: 0;
        transform: translate(-46%, 1.16rem);

      }

      .bg-img1 {
        display: block;
        width: 2.304rem;
        height: auto;
        top: 0;
        right: 0;
        transform: translate(48%, -101%);
      }

      .bg-img2 {
        display: block;
        width: 3.1rem;
        height: auto;
        bottom: 0;
        right: 0;
        transform: translate(88%, 90%);
      }

      .app-img,
      .group-img {
        z-index: 2;
        width: auto;
      }

      .app-img-1 {
        display: block;
        height: 2.8rem;
        top: -1.8rem;
        left: 0.8rem;

      }

      .app-img-2 {
        display: block;
        height: 2.8rem;
        top: -1.4rem;
        left: -3.6rem;
      }

      .app-img-3 {
        display: block;
        top: -1.4rem;
        right: -1.2rem;
        height: 2.8rem;
      }

      .app-img-4 {
        display: block;
        height: 2.82rem;
        right: 1.8rem;
        top: 2.2rem;
      }

      .app-img-5 {
        display: block;
        width: 2.82rem;
        bottom: -1.2rem;
        right: 0.8rem;
        z-index: 4;
      }

      .group-img-1 {
        display: block;
        width: 8rem;
        top: 4rem;
        left: -5.2rem;

      }

      .group-img-2 {
        display: block;
        width: 7.8rem;
        bottom: -2rem;
        left: -4rem;

      }

      .group-img-3 {
        display: block;
       width: 8rem;
       bottom: -6rem;
       right: -3rem;

      }

      .arrows-img {
        display: block;
        z-index: 3;

      }

      .arrows-img-1 {
        width: 1.3rem;
        top: 1.3rem;
        right: -1rem;
      }

      .arrows-img-2 {
       width: 1.51rem;
       top: -0.2rem;
       left: -2rem;
      }

      span {
        display: block;
        z-index: 4;

        &.dot {
          border-radius: 50%;
        }

        &.top-dot {
          width: 0.427rem;
          height: 0.418rem;
          background: #00B65B;
          top: -1.68rem;
          left:55%;
        }

        &.bot-dot {
          width: 0.46rem;
            height: 0.45rem;
          background: #FFC700;
          left: -3rem;
          top: 50%;
        }

        &.side {
          width: 0.314rem;
            height: 0.314rem;
          right: 0.5rem;
          top: 2.5rem;
          background: #FF782D;
          transform: rotate(224deg) translateZ(0);

        }
      }

    }
  }
</style>
